<template>
  <section class="chart-container">
    <el-row>
      <el-col :span="12">
        <div id="chartPie" style="width:100%; height:400px;"></div>
      </el-col>
    </el-row>
  </section>
</template>
<script>
import echarts from "echarts";

export default {
  data() {
    return {
      chartPie: null,
    };
  },
  methods: {
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById("chartPie"));
      this.chartPie.setOption({
        title: {
          text: "2019年 医疗设备销售总览",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["病房护理设备", "其它治疗设备","理化设备", "放射治疗设备", "手术设备"],
        },
        series: [
          {
            name: "医疗设备销售总览",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 207, name: "病房护理设备" },
              { value: 310, name: "手术设备" },
              { value: 434, name: "放射治疗设备" },
              { value: 135, name: "理化设备" },
              { value: 1369, name: "其它治疗设备" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
  },

  mounted: function () {
    this.drawCharts();
  },
  
};
</script>
 
<style scoped>
.chart-container {
  width: 100%;
  float: left;
  background: #fff;
}
.el-col {
  padding: 30px 20px;
}
</style>
